<template>
	<div class="rights">
		<div class="hts">
			<div class="hts">
				<div class="rig">
				{{str}}
				</div>
				<div v-for="(item, index) in arrs" :key="index" class="fen">
					<div class="img">
						<img :src="item.img1" alt="">
					</div>
					<p>{{ item.category }}3</p>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
import service from "../../utils/service"
export default {
	data() {
		return {
			arrs: [

			],
			str:'VR眼镜 '
		}
	},
	mounted() {
		service({
			url: "api/pro/recommendlist",
			method: "get",
		}).then(res => {
			// console.log(res.data.data);
			res.data.data.forEach(element => {
				this.arrs.push(element)
			})
			this.$bus.$on("hello", (v) => {
				this.str = v;
				// console.log(v);
			});
		})
	}
}
</script>

<style scoped>
.rights {
	width: 2.89rem;
	box-sizing: border-box;
	float: right;
	overflow: hidden;
	padding: 0 7px 0;
}

.rig {
	width: 100%;
	/* margin-top: 4px; */
	margin-bottom: 13px;
	margin-left: -0.09rem;
	width: 100%;
	font-size: 16px;
	overflow: hidden
}

.hts {
	width: 2.55rem;
	margin: 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.fen {
	width: .75rem;
	height: 1.05rem;
	box-sizing: border-box;
	font-size: 14px;
	display: flex;
	align-content: stretch;
	flex-wrap: wrap;
}

.img {
	width: .6rem;
	height: .6rem;
	margin-left: 7px;
}

.img img {
	width: 100%;
}

p {
	width: 100%;
	height: 35px;
	margin-top: 3px;
	text-align: center;
}
</style>
</style>